<template>
  <div>
    <group>
      <flexbox>
        <flexbox-item>
          <div style="width: 178px; height: 138px; margin-top: 20px">
            <Upload
              :url="headUrl"
              :uploadType="1"
              @handleUpdateImg="handleUpdateImg"
              class="flex-demo"
            ></Upload>
          </div>
        </flexbox-item>
        <flexbox-item>
          <div style="margin-top: 20px">
            <div
              class="flex-demo"
              style="font-weight: bold !important; font-size: 20px !important"
            >
              游客未登入
            </div>

            <div class="flex-demo">
              <img
                src="https://image.110go.com/upload/tpk/2794105.jpg"
                class="flex-demo"
                style="width: 50px; height: 50px"
              />
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fec13677cebfbe7dab5ae7edbf3e0aee15c0d82dc1b737-ValM5n_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631196724&t=511af58c9e81ce69aa984e1d36b6c7c0"
                class="flex-demo"
                style="width: 50px; height: 50px"
              />
            </div>
          </div>
        </flexbox-item>
      </flexbox>
      <divider>游戏大厅</divider>
    </group>

    <!--    <group title="cell demo" @click.native="isShow = true">-->
    <!--      <cell title="VUX" value="cool" is-link></cell>-->
    <!--    </group>-->
    <!--    <Actionsheet v-model="isShow" :menus="menus2"></Actionsheet>-->
    <grid :cols="2" :show-lr-borders="false">
      <grid-item
        v-for="(v, i) in this.gameList"
        :key="i"
        @click.native="handleClick(i, v)"
      >
        <div>
          <div>
            {{ i + 1 }}.{{ v.name }}
            <div style="float: right; color: palevioletred">
              <x-icon type="ios-heart" size="20" class="cell-x-icon"></x-icon>
              {{ !v.sort ? 0 : v.sort }}
            </div>
          </div>

          <div align="center">
            <img
              slot="icon"
              :src="baseUrl + v.logo"
              align="center"
              class="grid-center"
              style="width: 120px; height: 120px"
            />
          </div>
        </div>
      </grid-item>
    </grid>
  </div>
</template>

<script>
import { Group, Cell } from "vux";
import { Actionsheet } from "vux";
import Upload from "./upload/upload.vue";
import { Flexbox, FlexboxItem, Divider } from "vux";
import { Grid, GridItem } from "vux";

export default {
  components: {
    Group,
    Cell,
    Actionsheet,
    Upload,
    Flexbox,
    FlexboxItem,
    Divider,
    Grid,
    GridItem,
  },
  data() {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: "Hello World!",
      isShow: true,
      menus2: {
        menu1: "Take Photo",
        menu2: "Choose from photos",
      },
      headUrl: "",
      gameList: [],
      baseUrl: this.$http.imgUrl(""),
    };
  },
  created() {
    this.$http({
      url: this.$http.adornUrl("/gms/game/listall"),
      method: "get",
      params: this.$http.adornParams({}),
    }).then(({ data }) => {
      console.log(data);
      this.gameList = data.list;
    });
  },
  methods: {
    handleUpdateImg(url) {
      console.log("122", url);
      this.headUrl = url;
    },
    handleClick(i, v) {
      console.log("i,v", i, v);
      this.$router.push({ name: "/Game", params: v });
      this.$http({
        url: this.$http.adornUrl("/gms/game/upsort"),
        method: "get",
        params: this.$http.adornParams({gameId:v.gameId}),
      }).then(({ data }) => {});
    },
  },
};
</script>

<style lang="less">
@import "~vux/src/styles/1px.less";

.flex-demo {
  text-align: center;
  color: #000000;
  //background-color: #20b907;
  border-radius: 4px;
  background-clip: padding-box;
}

.grid-center {
  display: block;
  text-align: center;
  color: #666;
}

.weui-grids {
  background-color: #fff;
}

.vux-x-icon {
  fill: #f70968;
}
.cell-x-icon {
  //display: block;
  fill: red;
  //float: right;
}
</style>
